<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评分项创建 - 生活状态评分系统</title>
    <link href="/static/bootstrap.min.css" rel="stylesheet">
    <link href="/static/custom.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="/">生活状态评分系统</a>
            <div class="navbar-nav">
                <a class="nav-link" href="/judge">评分页面</a>
                <a class="nav-link active" href="/create">评分项创建</a>
                <a class="nav-link" href="/history">历史评分</a>
            </div>
        </div>
    </nav>

    <div class="container mt-5">
        <h2>评分项创建</h2>
        
        <div class="row mt-4">
            <!-- 移除Excel导入模块，保留手动创建 -->
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">手动创建</h5>
                        <form id="manualForm">
                            <div class="mb-3">
                                <label for="itemName" class="form-label">项目名称</label>
                                <input type="text" class="form-control" id="itemName" name="itemName" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">是否为勾选项</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="isCheckbox" id="isCheckboxYes" value="true">
                                    <label class="form-check-label" for="isCheckboxYes">是</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="isCheckbox" id="isCheckboxNo" value="false" checked>
                                    <label class="form-check-label" for="isCheckboxNo">否</label>
                                </div>
                            </div>
                            <div id="optionsContainer">
                                <div class="mb-3 option-row">
                                    <label class="form-label">选项、分数和ID</label>
                                    <div class="row mb-2">
                                        <div class="col">
                                            <input type="text" class="form-control" placeholder="选项" name="options[]">
                                        </div>
                                        <div class="col">
                                            <input type="number" class="form-control" placeholder="分数" name="scores[]">
                                        </div>
                                        <div class="col">
                                            <input type="text" class="form-control" placeholder="ID(如20240601001)" name="option_ids[]" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-outline-primary mb-3" onclick="addOption()">添加选项</button>
                            <button type="submit" class="btn btn-primary">提交</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/bootstrap.bundle.min.js"></script>
    <script src="/static/custom.js"></script>
    <script>
        function addOption() {
            const container = document.getElementById('optionsContainer');
            const newOption = document.createElement('div');
            newOption.className = 'mb-3 option-row';
            newOption.innerHTML = `
                <div class="row mb-2">
                    <div class="col">
                        <input type="text" class="form-control" placeholder="选项" name="options[]">
                    </div>
                    <div class="col">
                        <input type="number" class="form-control" placeholder="分数" name="scores[]">
                                        </div>
                                        <div class="col">
                                            <input type="text" class="form-control" placeholder="ID(如20240601001)" name="option_ids[]" required>
                                        </div>
                                    </div>
                                `;
            container.appendChild(newOption);
        }

        // 处理手动创建表单提交
        document.getElementById('manualForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const formData = {
                item_name: document.getElementById('itemName').value,
                is_checkbox: document.querySelector('input[name="isCheckbox"]:checked').value === 'true',
                options: Array.from(document.getElementsByName('options[]')).map(input => input.value),
                scores: Array.from(document.getElementsByName('scores[]')).map(input => parseInt(input.value)),
                option_ids: Array.from(document.getElementsByName('option_ids[]')).map(input => input.value)
            };
            try {
                const response = await fetch('/create', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(formData)
                });
                const result = await response.json();
                if (response.ok) {
                    alert('创建成功！');
                    window.location.href = '/';
                } else {
                    alert('创建失败：' + result.error);
                }
            } catch (error) {
                alert('提交失败：' + error.message);
            }
        });
    </script>
</body>
</html> 